<template>
  <el-dialog
    v-loading="loading"
    :visible.sync="dialogVisible"
    :show-close="true"
    :append-to-body="true"
    :close-on-click-modal="false"
    :class="{'mobile-el-dialog':showMobilePage}"
    class="small-common-dialog-size"
    @close="closeDialog"
  >
    <div :style="{maxHeight:dialogMainHeight+'px'}" :class="{'mobile-content':showMobilePage}" class="create-income-scorll">
      <Title :title="dialogTitle" style="margin-bottom: 18px;" />
      <el-form ref="ruleForm" :model="paramsObj" :rules="rules" :label-position="showMobilePage ? 'left' : 'right'" class="lineHeight32" label-width="88px">
        <el-form-item label="收款户名" prop="payName">
          <el-input
            v-model="paramsObj.payName"
            :maxlength="100"
            class="width240"
            placeholder="请输入收款户名"
            type="text"
            size="small"
          />
        </el-form-item>
        <el-form-item label="收款账号" prop="payNum">
          <el-input
            v-model="paramsObj.payNum"
            :maxlength="200"
            type="text"
            class="width240"
            size="small"
            placeholder="请输入收款账号"
          />
        </el-form-item>
        <el-form-item label="银行" prop="bank">
          <el-select
            v-model="paramsObj.bank"
            class="width240"
            placeholder="请选择"
            filterable
            size="small">
            <el-option
              v-for="item in bankList"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="支行" prop="subBank">
          <el-input
            v-model="paramsObj.subBank"
            :maxlength="100"
            class="width240"
            type="text"
            placeholder="请输入支行"
            size="small"
          />
        </el-form-item>
        <!-- 有赞供应商显示对方联系人字段 -->
        <el-form-item v-if="type === 3" label="对方联系人" prop="contactPerson">
          <el-input
            v-model="paramsObj.contactPerson"
            :maxlength="50"
            class="width240"
            type="text"
            placeholder="请输入对方联系人"
            size="small"
          />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input
            v-model="paramsObj.identityNumber"
            :maxlength="20"
            type="text"
            class="width240"
            size="small"
            placeholder="请输入身份证号"
          />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input
            v-model="paramsObj.tel"
            :maxlength="20"
            class="width240"
            type="text"
            placeholder="请输入联系电话"
            size="small"
          />
        </el-form-item>
        <el-form-item label="省市" prop="province">
          <three-level-area
            :selected-options="handelArr(paramsObj.province)"
            select-type="city"
            placeholder="请选择省市"
            @update:options="threeLevelArea($event)" />
        </el-form-item>
      </el-form>
      <fixed-pagination :open-fixed="showMobilePage">
        <div :class="`${showMobilePage?'center':'dialog-footer'}`">
          <el-button :loading="btnLoading" :disabled="btnLoading" class="ok mobile-btn-flex" type="primary" @click="handelOk">确定</el-button>
          <el-button class="cancel-btn-style" type="info" style="font-size: 16px" @click="closeDialog">取消</el-button>
        </div>
      </fixed-pagination>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import { accountAdd, accountEdit } from '@/api/supplier';
import accountTable from '@/mixins/accountTable';
import { mapState } from 'vuex';

export default {
  components: { Title, ThreeLevelArea },
  mixins: [accountTable],
  data() {
    return {
      isEdit: false,
      loading: false,
      btnLoading: false,
      dialogVisible: false,
      dialogMainHeight: '',
      supplierId: '',
      type: '',
      paramsObj: {
        payName: null,
        payNum: null,
        identityNumber: null,
        tel: null,
        bank: null,
        province: null,
        subBank: null,
        contactPerson: null
      },
      options: [
        { id: 1, name: '未绑定' },
        { id: 0, name: '已绑定' }
      ],
      rules: {
        'payName': [{ required: true, message: '请输入收款户名', trigger: 'blur' }],
        'payNum': [{ required: true, message: '请输入收款账号', trigger: 'blur' }],
        'identityNumber': [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        'tel': [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dialogTitle() {
      return `${this.isEdit ? '编辑' : '添加'}收款账户`;
    }
  },
  created() {
    this.getBankList();
  },
  methods: {
    filterParams(obj) {
      const params = {};
      for (const i in obj) {
        if (obj[i]) {
          params[i] = obj[i];
        }
      }
      return params;
    },
    handelOk() {
      this.$refs['ruleForm'].validate((vaild) => {
        if (vaild) {
          const paramsObj = this.filterParams(this.paramsObj);
          paramsObj.supplierId = this.supplierId;
          paramsObj.type = this.type;
          this.btnLoading = true;
          if (this.isEdit) {
            this.edit(paramsObj);
          } else {
            this.add(paramsObj);
          }
        } else {
          return false;
        }
      });
    },
    add(paramsObj) {
      accountAdd(paramsObj).then((res) => {
        this.btnLoading = false;
        if (res.code === 200) {
          this.$message.success('创建成功');
          this.closeDialog();
          this.$emit('updateData');
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    edit(paramsObj) {
      accountEdit(paramsObj).then((res) => {
        this.btnLoading = false;
        if (res.code === 200) {
          this.$message.success('编辑成功');
          this.closeDialog();
          this.$emit('updateData');
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.btnLoading = false;
      });
    },
    openDialog(id, type, data) {
      const clientHeight = window.innerHeight;
      this.dialogMainHeight = (clientHeight * 4) / 5;
      this.dialogVisible = true;
      this.supplierId = id;
      this.type = type;
      if (data) {
        this.isEdit = true;
        const { payName, payNum, identityNumber, tel, bank, province, subBank, id } = data;
        this.paramsObj.payName = payName;
        this.paramsObj.payNum = payNum;
        this.paramsObj.identityNumber = identityNumber;
        this.paramsObj.tel = tel;
        this.paramsObj.bank = bank;
        this.paramsObj.province = province;
        this.paramsObj.subBank = subBank;
        this.paramsObj.id = id;
        if (type === 3) { // 有赞供应商显示对方联系人字段
          this.paramsObj.contactPerson = data.contactPerson;
        }
      }
      this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
    },
    closeDialog() {
      this.dialogVisible = false;
      this.isEdit = false;
      this.paramsObj = {
        payName: null,
        payNum: null,
        identityNumber: null,
        tel: null,
        bank: null,
        province: null,
        subBank: null,
        contactPerson: null
      };
      this.$refs.ruleForm && this.$refs.ruleForm.clearValidate();
    },
    // 选择城市
    threeLevelArea(data) {
      this.paramsObj.province = data.join(',');
    },
    handelArr(data) {
      if (!data) return [];
      if (typeof data === 'string') {
        return data.split(',');
      } else {
        return data;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.width240 {
  width: 240px;
  &::v-deep  {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mobile-content {
  &::v-deep {
    .threee-level-area-wrap .el-cascader {
      width: 200px !important;
    }
  }
  .width240 {
    width: 200px;
    &::v-deep  {
      .el-input__inner {
        width: 200px;
      }
    }
  }
}
.mobile-el-dialog {
  .create-income-scorll {
    max-height: 80vh !important;
    padding-bottom: 56px;
    overflow-y: auto !important;
  }
}
</style>
